<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件不提供界面显示，只提供倒计时文本，由用户将文本嵌入到具体的场景。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-code-verify ref="codeVerify1" customStyle="background: #ffaa7f;color: #ffffff;padding: 2px 5px;" @send="handleSend1" @change="handleChange"></fu-code-verify>
		</fu-section>
		
		<fu-section title="保持倒计时(开始后退出此页面再次进入，倒计时仍然继续)" customClass="fu-m-t-20" type="line">
			<fu-code-verify ref="codeVerify2" customStyle="background: #2979ff;color: #ffffff;padding: 2px 5px;" keepRunning @send="handleSend2"></fu-code-verify>
		</fu-section>
		
		<fu-section title="文本样式" customClass="fu-m-t-20" type="line">
			<fu-code-verify ref="codeVerify3" width="fit-content" @send="handleSend3"></fu-code-verify>
		</fu-section>
		
		<fu-section title="发送失败" customClass="fu-m-t-20" type="line">
			<fu-code-verify ref="codeVerify4" width="fit-content" @send="handleSend4"></fu-code-verify>
		</fu-section>
	</view>
</template>

<script setup>
	import { nextTick, ref } from 'vue';
	
	// data数据
	const codeVerify1 = ref();
	const codeVerify2 = ref();
	const codeVerify3 = ref();
	const codeVerify4 = ref();
	
	// methods方法
	const handleSend1 = () => {
		setTimeout(() => {
			codeVerify1.value.startTimer()
		}, 500)
	};
	
	const handleSend2 = () => {
		setTimeout(() => {
			codeVerify2.value.startTimer()
		}, 500)
	};
	
	const handleSend3 = () => {
		setTimeout(() => {
			codeVerify3.value.startTimer()
		}, 500)
	};
	
	const handleSend4 = () => {
		setTimeout(() => {
			uni.$fu.toast('发生失败')
			codeVerify4.value.reset()
		}, 1000)
	};
	
	const handleChange = (e) => {
		console.log(e);
	};
</script>

<style lang="scss">

</style>